<!doctype html>
<html lang="en">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>个人信息</title>
  <!-- Icons-->
  <link href="../vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="../vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
  <link href="../vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  <script src="../vendors/echarts/dist/echarts.min.js" ></script>
</head>
<script type="text/css"></script>

<style>
  .div1 {
    background: rgb(38, 202, 231);
    color: rgb(252, 247, 247);
  }
</style>

<body class="app header-fixed sidebar-fixed aside-menu-fixed pace-done sidebar-lg-show">
  <header class="app-header navbar">
    <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
      <span class="navbar-toggler-icon"></span>
    </button>

    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="btn-group" role="group" aria-label="Button group">
      <p class="btn"> 你好，无敌的 销售员！</p>
      <a class="btn" href="/api/emp/logout">
        <i class="fa fa-share" aria-hidden="true"></i> &nbsp;退出</a>
    </div>


  </header>
  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav ps ps--active-y">
        <ul class="nav">
          <br>
          <li class="nav-item nav-dropdown ">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-puzzle"></i> 客户信息</a>
            <ul class="nav-dropdown-items">
              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_add_user">
                  <i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;添加客户</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_manage_user">
                  <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;查看客户</a>
              </li>
            </ul>
          </li>
          <br><br>
          <li class="nav-item nav-dropdown">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-star"></i>商城</a>
            <ul class="nav-dropdown-items">

              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_show_goods">
                  <i class="fa fa-shopping-basket" aria-hidden="true"></i>&nbsp;商品展示</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_manage_order">
                  <i class="icon-speech"></i>&nbsp;订单管理</a>
              </li>
            </ul>
          </li>
          <br><br>
          <li class="nav-item nav-dropdown">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-cursor"></i>个人中心</a>
            <ul class="nav-dropdown-items">
              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_security">
                  <i class="icons cui-shield"></i> &nbsp;账号安全</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/salesman/salesman_personal_information">
                  <i class="fa fa-bar-chart" aria-hidden="true"></i> &nbsp;个人信息</a>
              </li>

            </ul>
          </li>

        </ul>
        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
          <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
        </div>
        <div class="ps__rail-y" style="top: 0px; height: 445px; right: 0px;">
          <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 297px;"></div>
        </div>
      </nav>
      <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>
    <main class="main">
      <!-- Breadcrumb-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">你的位置：个人中心->个人信息</li>
      </ol>

      <div align="center">
        <div class="col-sm-12 col-md-10" align="center">

          <div class="card border-primary" align="center">

            <div class="card-body">
              <div class="card" id="itemsTemplate">

                <div class="card-header" align="center">
                  <h2><i class="fa fa-bar-chart" aria-hidden="true"></i>个人信息</h2>
                </div>
                <div class="card-body" align="center">

                  <form class="needs-validation" novalidate>

                    <div class="form-group row">

                      <div class="card-body collapse show" id="collapseExample">
                        <table class="table table-responsive-sm table-bordered">

                          <tbody id="trlist" align="center" >
                            <tr>
                              <td>姓名</td>
                              <td>
                                <div class="col-md-9">
                                    <p class="col-form-label">{{items.empName}}</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>完成订单数</td>
                              <td>
                                <div class="col-md-9">
                                    <p class="col-form-label">{{empCountAll}}</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>

                      </div>

                    </div>


                  </form>
                </div>
              </div>
              <div id="main" style="width: 500px;height:300px;"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  <script src="../vendors/jquery/js/jquery.min.js"></script>
  <script src="../vendors/popper.js/js/popper.min.js"></script>
  <script src="../vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="../vendors/pace-progress/js/pace.min.js"></script>
  <script src="../vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="../vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="../vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script>
  <script src="../vendors/mock.js/js/mock.min.js"></script>
  <script src="../vendors/vue.js/js/vue.min.js"></script>

  <script>
    var p, d, j;
    var app;
    var item;
    var checkValidity;
    $(function () {
      Mock.mock("http://127.0.0.1:5500/users", {
        "data|1-1": [{
          empName: "@cname()",//编号
          empCount: "@increment()"

        }],
        suceess: true,
        code: 200,
        msg: "Success"
      });
      $.getJSON("/api/emp/personSaleman", function (response) {
        items = response.data;
        // console.log(items.empCountList[0])
        var empCountAll = 0;
        var datamonth=[];
        var dataempCount=[];
        var i = 0 ;
        for(var key in items.empCountList){
          empCountAll+=items.empCountList[key];
          datamonth[i]=key;
          dataempCount[i]=items.empCountList[key];
          i = i + 1 ;

        }
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var  option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['业绩']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: datamonth
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '业绩统计',

                        }
                    ],
                    series: [
                         
                        {
                            name:'业绩',
                            type:'bar',
                            itemStyle : {  /*设置折线颜色*/
                                normal : {
                                    color:'#3299CC'
                                }
                            },
                            data:dataempCount
                        },
                        {
                            name:'折线',
                            type:'line',
                            data:dataempCount
                        }
                    ]
            };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items,
            empCountAll: empCountAll
           
          },
          methods: {


          }

        });
        return;
      });
    });



  </script>

</body>

</html>